/* You can add global styles to this file, and also import other style files */

/*改写原有框架部分*/
body>* {
    font-family: "Hiragino Sans GB", "Microsoft YaHei",
    "WenQuanYi Micro Hei", "sans-serif";
    font-size: 14px;
}
body{ min-width: 1100px;}
app-root, #app

a {
    color: #000;
}

a:hover, a:focus {
    color: #999;
}

.btn-default {
    background-color: #f3f3f3
}

label {
    font-weight: 100
}
$ys_color: #00CEFF;
$ws_color: #FFA800;
$ps_color: #00FF04;
$color_red: #FF764F;
$bg_red1: #FF764F;
$bg_red2: #FFA186;
$blue_more: #010309;
$blue_less: #C7F7FF;
$blue_normal: #1C40BC;
$alarm_normal: #FF0074;
$alarm_dark: #D10101;
$blue_1: #0085D0;
$blue2: #75CBFB;
$blue3: #0412b5;
$blue_header_light:linear-gradient(-180deg, #496CE5 0%, #193DBA 100%);
$blue_header_dark:  linear-gradient(-180deg, #122770 0%, #000000 100%);
$blue_body: linear-gradient(-180deg, #122770 0%, #000000 100%);
//$blue_body_radius: radial-gradient(50% 165%, #011350 39%, #000000 100%);
$blue_body_radius:radial-gradient(#011350 5%, #020F3E 25%, #000000 100%);
$green_normal: #00FF04;
$left_bar_active_border_color: #38E0B5;
$bg_blue_left: #003366;
$color_dk1: #878A95;
$color_dk2: #000;
$bg_dk1: none;
$bg_dk2: #F2F4F8;
$left_bar_bg: none;
$left_bar_color: #fff;
$left_bar_active_bg: linear-gradient(270deg, rgba(63, 60, 60, 0.05) 1%, rgba(246, 241, 241, 0.6) 100%);
$left_bar_active_color: #fff;

$left_width: 200px;
$header_height: 60px;

$footer_height: 30px;
$content_space: 0;
$shadow_blue: 1px 1px 5px #0D89D3;
$shadow_ccc: 1px 1px 5px #ccc;
$login_box_height: 400px;
$find_password_height: 500px;
$login_box_width: 800px;
$head_onebox_width: 100px;
$head_onebox_space: 10px;
$active_nav_bg: linear-gradient(0deg, #33D9F3 0%, #17B1E4 100%);
$content_border_color: #1C40BC;
$content_title_height: 40px;
.btn-primary {
    background: $blue_header_light;
    border: none;
}

.btn-primary:active, .btn-primary:hover, .btn-primary:focus {
    background: $blue3
}
.table_btn_primary{ white-space: nowrap; display: inline-block; font-size: 12px; cursor: pointer; background: $blue_header_light; border: none; color: #fff; border-radius: 5px; padding: 5px 10px;}
.table_btn{ white-space: nowrap; display: inline-block; font-size: 12px; cursor: pointer;  border: none; color: #fff; border-radius: 5px; padding: 5px 10px;}
app-header-layout{ display: block; position: absolute;
    height:100%; width: 100%; overflow: hidden;}


.content_part{ position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
.content_l{ position: absolute; width: $left_width; bottom: 0; left: 0; top: 0; background: $blue_more;box-shadow: 0 4px 20px 0 rgba(72,107,228,0.50);
}
.content_r{ position: absolute; left: $left_width; bottom: 0; right: 0; top: 0; background: $blue_body_radius; overflow: hidden; overflow-y: auto}


#MapBox3d {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.content-box > .row {
    margin: 0;
}

.title_text {
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    padding: 15px;
}

.carousel .carousel-control-next:hover, .carousel .carousel-control-next:focus {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(46, 49, 68, 0.8) 100%);
}

.carousel .carousel-control-prev:hover, .carousel .carousel-control-prev:focus {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.0001) 0%, rgba(46, 49, 68, 0.8) 100%);
}





/* 内容部分*/

/* 4个边角 */
.corner_box_outer{}
$corner_size_outer:10px;
$corner_space_outer:-10px;
.corner_box_outer .corner1{  position: absolute; width: $corner_size_outer; height: $corner_size_outer;  left: $corner_space_outer; top: $corner_space_outer
}
.corner_box_outer .corner2{  position: absolute; width: $corner_size_outer; height: $corner_size_outer;  right: $corner_space_outer; top: $corner_space_outer
}
.corner_box_outer .corner3{  position: absolute; width: $corner_size_outer; height: $corner_size_outer;  left: $corner_space_outer; bottom: $corner_space_outer
}
.corner_box_outer .corner4{  position: absolute; width: $corner_size_outer; height: $corner_size_outer;  right: $corner_space_outer; bottom: $corner_space_outer
}
.corner_box_inner{}
$corner_size_inner:10px;
$corner_space_inner:-1px;
.corner_box_inner .corner1{  position: absolute; width: $corner_size_inner; height: $corner_size_inner;  left: $corner_space_inner; top: $corner_space_inner
}
.corner_box_inner .corner2{  position: absolute; width: $corner_size_inner; height: $corner_size_inner;  right: $corner_space_inner; top: $corner_space_inner
}
.corner_box_inner .corner3{  position: absolute; width: $corner_size_inner; height: $corner_size_inner;  left: $corner_space_inner; bottom: $corner_space_inner
}
.corner_box_inner .corner4{  position: absolute; width: $corner_size_inner; height: $corner_size_inner;  right: $corner_space_inner; bottom: $corner_space_inner
}
/*筛选项盒子*/
.admin_filter_box {
    padding: 30px 20px;
    border-radius: 5px;
    margin-bottom: 20px;
    border: 1px solid $content_border_color;
    color: #fff;
    background: rgba(0,0,0,0.70);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.50);
}

.admin_filter_box .filter_row {
}

.admin_filter_box .filter_row .filter_title {
    float: left;
    width: 80px;
    text-align: right;
    color: #fff;
    padding: 4px 0;
    cursor: auto;
}

.admin_filter_box .filter_row .filter_item {
    margin-left: 85px;
}

.admin_filter_box .filter_row .filter_item .filter_btn {
    cursor: pointer;
    display: inline-block;
    border: 1px solid $blue_1;
    margin-left: 8px;
    margin-bottom: 6px;
    border-radius: 5px;
    padding: 4px 10px;
    color: #fff
}

.admin_filter_box .filter_row .filter_item .filter_btn:hover {
    background: $blue_1;
    color: #fff;
}

.admin_filter_box .filter_row .filter_item .active {
    background: $blue_1;
    color: #fff;
}

.content_area .type_icon {
    height: 42px;
    position: relative;
    top: -13px;
}

.content_area .flowWay {
    height: 20px;
    top: -1px;
}

.content_area .line_map_2d {
    height: 42px;
    margin-bottom: 5px;
}

.content_area .line_map_2d .name {
    padding-right: 0
}

.map_control_area .map_title {
    line-height: 30px;
    font-size: 18px;
    font-family: serif;
    font-weight: bold;
}



.content_title {
    left: 0;
    padding-left: 15px;
    font-size: 14px;
    background: rgba(45,51,72,0.30);
    box-shadow: 4px 0 20px 0 rgba(0,0,0,0.50);
    height: $content_title_height;
    line-height: $content_title_height + 6;
    color: #fff;
}
.content_bg_img{
    position: absolute;
    bottom: 0;
    left: 0;
    right:0;
    height: 400px;
    z-index: 0;
    background: url("/assets/img/bg1.png") no-repeat;
    background-size: cover;
}
.content_inner {
    margin: 40px;
    margin-top: 20px;
}

.table_normal {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
    border-radius: 40px;
    border: 1px solid $blue_normal;
}

.table_normal tr {
    height: 40px;
}

.table_normal td {
    /* border: 1px solid $content_border_color; */
}

.table_normal thead tr {
    background: $blue_header_dark;
    border-bottom:1px solid $blue_normal ;
    color: #fff;
}

.table_normal tbody tr {
    color: #fff;
    background: #000103;
    border-bottom: 1px solid #3C3C3C;
    font-size: 13px;
}
.table_normal tbody tr:last-child{border-bottom: 1px solid $blue_normal;}
.table_normal tbody tr:nth-of-type(2n) {
}

.table_normal tbody tr:hover {
    background: #0B0E3A
}

.table_recruitment {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
}

.table_recruitment tr {
    height: 50px;
}

.table_recruitment td {
}

.table_recruitment thead tr {
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    background: #d7d7d7
}

.table_recruitment tbody tr {
    background: #fff
}

.table_recruitment tbody tr:nth-of-type(2n) {
    background: #f9f9f9
}

.table_recruitment tbody tr:hover {
    background: #e4fcff
}

.panel.panel-default {
    border: 1px solid $blue_normal;

}

.panel.panel-default .panel-heading {
    background: $blue_header_light;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.80);
    border-bottom: none;
    color: #fff;
    position: relative;
}
.panel.panel-default .panel-body {
    background: $blue_body;
}
.modal {
    display: block;
    background-color: rgba(0, 0, 0, 0.55);
}

.modal-content {
    overflow: hidden
}

.home_img {
    width: 100%;
    height: 400px;
}

.home_item_title {
    text-align: center;
    padding: 20px 0;
}

.home_item_title .title {
    font-size: 18px;
    font-family: SimHei
}

.home_item_title .title_en {
    font-size: 26px;
    position: relative;
    font-family: serif;
}

.home_item_title .title_en:after {
    content: '';
    height: 4px;
    width: 60px;
    background: red;
    position: absolute;
    top: 110%;
    margin-left: -30px;
    left: 50%;
    display: block
}

.about_us_img {
    width: 100%;
}

.home_serve_box a.col-sm-3:hover {
    text-decoration: none;
}

.business_container {
}

.left-bar {
    text-align: center;
    padding-bottom: 100px;
}

.left-bar .title {
    font-size: 16px;
    font-weight: bold;
    padding: 15px 0;
    color: $color_red;
    height: 70px;
}

.left-bar .left-bar-list-box {
}

.left-bar .left-bar-list { /*border-bottom: 1px solid #ccc;*/
    margin-top: 0;
    text-align: left
}

.left-bar .left-bar-list a {
    border-radius: 0;
    color: #fff;
    padding: 15px 40px;
    font-size: 14px
}

.left-bar .left-bar-list > a {
    background: $left_bar_bg;
    color: $left_bar_color;
    border-left: 2px solid transparent;
    padding: 20px 40px;
    font-size: 16px
}

.left-bar .left-bar-list > a:hover {
    background: $left_bar_active_bg;
    color: $left_bar_active_color;
}

.left-bar .left-bar-list > a .left_bar_icon {
    position: absolute;
    left: 10px;
    top: auto;
    margin-top: 3px
}

.left-bar .left-bar-list > a .left_bar_arrow {
    position: absolute;
    right: 10px;
    top: auto;
    margin-top: 3px
}

.left-bar .left-bar-list > .active {
    color: $left_bar_active_color;
    background: $left_bar_active_bg;
    border-left: 2px solid #3DDCB9
}

.left-bar .nav > li > a:hover, .left-bar .nav > li > a:focus {
    background: $left_bar_active_bg;
    color: $left_bar_active_color;
    border-left: 2px solid #3DDCB9;
}

.left-bar-list-box2 { /*margin: 0 15px;*/
}

.left-bar .left-bar-list .left-bar-list-box2 .active {
    color: red;
}

.right_container .right_title {
    padding: 10px 0;
    margin: 0;
}

.right_container .right_title .title {
    padding: 6px 10px;
    float: left;
    font-weight: bold
}

.right_container .right_nav {
    margin: 0;
    margin-top: 10px;
    margin-bottom: 10px;
}

.right_container .right_nav .spaceToRight {
    margin-left: 15px;
}

.right_container .right_nav .spaceLeftBtn {
    margin-right: 5px;
}

.pg_total_num {
    margin: 0 15px;
    color: #ccc;
}

.logout {
    padding: 6px 15px;
    margin-top: 18px;
}

.filter_btn_active {
    background: #fff;
    color: red;
}

.filter_btn_active:hover, .btn.filter_btn_active:active, .filter_btn_active:focus {
    background: #fff;
    color: red;
}

.form_title_right {
    text-align: right
}

.formToTitleSpace {
    margin-top: 30px;
}

app-root, #app {
    position: absolute;
    height: 100%;
    width: 100%;
}

#app {
    overflow: hidden
}

.pagination > li:last-child > a, .pagination > li:last-child > span, .pagination > li:first-child > a, .pagination > li:first-child > span {
    color: #fff;
    background: $blue_header_light;
    border: 1px solid $blue_normal;
}

.pagination > li.disabled > a {
    color: #ccc;
    background:$blue_header_dark;
    border: 1px solid $blue_normal;
}

.pagination > li > a, .pagination > li > span {
    color: #ccc;
    background:$blue_header_dark;
    border: 1px solid $blue_normal;
}

.pagination > .active > a {
    color: #fff;
    border-color:#717171;
    background: #035482;
}
.pagination > .disabled > a, .pagination > .disabled > a:hover{
    border-color:#717171;
}
.pagination > .active > a:hover {
    border-color: $blue_1;
    background: $blue_1;
}

.left-bar .ant-menu {
    background: transparent;
    border: none;
    font-size: 16px;
}

.left-bar .ant-menu-submenu > .ant-menu {
    background: transparent;
}

.left-bar .ant-menu-vertical .ant-menu-item, .left-bar .ant-menu-inline .ant-menu-item, .left-bar .ant-menu-vertical .ant-menu-submenu-title, .left-bar .ant-menu-inline .ant-menu-submenu-title {
    color: #fff;
    font-size: 16px;
    text-align: left
}

.left-bar .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    background: $left_bar_active_bg;
}

.left-bar .ant-menu-inline .ant-menu-item::after, .left-bar .ant-menu-vertical .ant-menu-item::after {
    left: 0;
    right: auto;
    border-color: $left_bar_active_border_color;
}

.left-bar .ant-menu-inline .ant-menu-item, .ant-menu-vertical .ant-menu-item {
    margin-left: 0;
    left: 0;
}

.task_img > img {
    width: 100%;
}

.history_task_title {
    border-bottom: 2px solid $blue_1;
    color: $blue_1;
    padding: 10px 0;
    font-size: 18px;
    font-weight: bold
}

.task-details-modal-body {
    height: 300px;

    overflow: hidden;
    overflow-y: hidden;
    overflow-y: auto;
}

.map_icon_total {
    border-radius: 5px;
    display: inline-block;
    background: $left_bar_active_border_color;
    width: 10px;
    height: 10px;
    margin-right: 5px;
}

.map_icon_deley {
    border-radius: 5px;
    display: inline-block;
    background: red;
    width: 10px;
    height: 10px;
    margin-right: 5px;
}

.map_control_area {
    color: #fff;
    background: $blue_body;
    box-shadow: 1px 1px 4px $blue_normal;
    border: 1px solid $blue_normal;
    padding: 15px;
    position: absolute;
    left: 30px;
    top: 20px;
    z-index: 10;
    width: 160px;
}

.map_control_area > .row {
    margin: 0 auto;
}

.map_control_area > .map_control_area > .row {
    margin: 0 auto;
}
.fc_detail_pic{
    width: 300px;
    height: 200px;
}
//复选框
.filter_checkbox_label {
    background-color: #fafbfa;
    padding: 9px;
    border-radius: 50px;
    display: inline-block;
    position: relative;
    margin-right: 30px;
    -webkit-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
    width: 40px;
    height: 15px;
    cursor: pointer;
    font-size: 1em;
}

.filter_checkbox_label:before {
    content: ' ';
    position: absolute;
    background: white;
    top: 1px;
    left: 1px;
    z-index: 999999;
    width: 18px;
    -webkit-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
    height: 16px;
    border-radius: 100px;
    box-shadow: 0 3px 1px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.3);
}

.filter_checkbox_label.active:before {
    content: ' ';
    position: absolute;
    left: 21px;
    background: white;
    top: 1px;
    z-index: 999999;
    width: 18px;
    -webkit-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
    height: 16px;
    border-radius: 100px;
    box-shadow: 0 3px 1px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.3);
}

.filter_checkbox_label:after {
    content: ' ';
    position: absolute;
    top: 0;
    -webkit-transition: box-shadow 0.1s ease-in;
    transition: box-shadow 0.1s ease-in;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 100px;
    box-shadow: inset 0 0 0 0 #eee, 0 0 1px rgba(0, 0, 0, 0.4);
    background: #D6D6D6;
}

.filter_checkbox_label.active:after {

    content: ' ';
    font-size: 1.5em;
    position: absolute;
    background: $blue_normal;
    top: 0;
    -webkit-transition: box-shadow 0.1s ease-in;
    transition: box-shadow 0.1s ease-in;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 100px;
    box-shadow: inset 0 0 0 0 #eee, 0 0 1px rgba(0, 0, 0, 0.4);
}

.filter_checkbox_label > input {
    display: none
}

.amap-icon > img {
    width: 100%;
    height: 100%;
}
.search_items{ margin-bottom: 20px;}
.search_items .title{ display: inline-block; width: 80px; text-align: right; cursor: auto;}
.search_items >.form-group{margin-left:10px;  }
.search_items >.form-group >.form-control{width: 100px;border: 1px solid $blue_1
}

.overview_items{ }
.panel_overview{ border: none; overflow: hidden;}
.overview_items .item_icon{display: table-cell;
    vertical-align: top;
    font-size:  30px;
    padding: 10px 25px;
    color: #fff;}
.overview_items .item_content{display: table-cell;
    vertical-align: top;
    background: $blue_header_light;
    color: #fff;
    padding-left: 20px;
    width: 1000px;}
/* 传感器地图上的图标 */
.sensorPointIcon{ color: #fff; font-size: 12px; text-align: center; position: relative;
    width: 20px;}
.sensorPointIcon >img{ width: 20px; position: absolute; left: 0; top: -1; z-index: -1; }
/* 地图上的告警图标 */
@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0.4;
    }
}
.alarmPointIcon{ color: #fff; font-size: 12px; text-align: center; position: relative;
    width: 30px; height: 30px;}
.alarmPointIcon >img{ width: 30px; position: absolute; left: 0; top: -1; z-index: 1; animation: flash 6s infinite;}

/* 地图图标说明 */
$icon_left_space: 40px;
$icon_right_space: 3px;
.map_icon_show{bottom: 30px;  left: 50%;  transform: translateX(-50%); border:none; color: #fff; font-size: 14px; position: absolute; z-index: 1; width: 1000px; overflow-x: hidden; height: 40px; background: $blue_body}
.map_icon_show .pipeline_icon{ margin-right: $icon_right_space; width: 40px; height: 4px; border-radius: 4px; margin-left: $icon_left_space;}
.map_icon_show .ys_icon{ background: $ys_color}
.map_icon_show .ws_icon{ background: $ws_color}
.map_icon_show .ps_icon{ background: $ps_color}
.map_icon_show .icon_name{}
$well_radius: 15px;
.map_icon_show .fc_icon{ margin-right: $icon_right_space;  margin-left: $icon_left_space;}
.map_icon_show .well_icon{ margin-right: $icon_right_space; background: #fff; border-radius: $well_radius; width: $well_radius; height: $well_radius; margin-left: $icon_left_space;}
.map_icon_show .alarm{ color: $alarm_dark; margin-left: $icon_left_space;}
.amap-ui-control-position-rb{ z-index: 2}

/* 修改地图提示框 */
.amap-ui-smp-ifwn-container .amap-ui-smp-ifwn-content-body{border: 1px solid $blue_normal; background: $blue_body;color: #fff; padding-top: 0;}
.amap-ui-smp-ifwn-container .amap-ui-smp-ifwn-content-body .amap-ui-infowindow-body{ color: #fff;}
.amap-info-contentContainer .amap-ui-smp-ifwn-combo-sharp{background: url("/assets/img/sharp.png") no-repeat -5px -16px;}
.amap-info-contentContainer .amap-ui-smp-ifwn-def-tr-close{ margin-top: 7px; color: #fff;}
.amap-info-contentContainer .amap-ui-smp-ifwn-info-title{ border-bottom: none; background:linear-gradient(-180deg, #496CE5 0%, #193DBA 100%); margin: 0 -3px; padding: 5px 25px 5px 3px; }
/*适配部分*/

.my-desc{ min-width: 240px;}
    /* 弹出框model */
.wrapper .modal-footer{
    border-top: none;
    text-align: center;
    .model_btn{box-shadow: 0 4px 8px 0 rgba(0,0,0,0.30);
        border: none; border-radius: 5px; display: inline-block; width: 45%; padding: 10px; background: $blue_header_light; font-size: 14px;color: #fff;}
}
.wrapper .modal-header{text-align: center; background: $blue_header_light;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.80); border-bottom: none}
.wrapper .modal-body {
    input[type=text],textarea{ background: rgba(0,0,0,.3); color: #fff; border: 1px solid $blue_normal}
    select{ background: rgba(0,0,0,.7); color: #fff; border: 1px solid $blue_normal}
}
.wrapper .modal-content{ background: $blue_body; color: #fff; border: 1px solid $blue_normal}
.pilineChartBox{ height: 300px;}
@media only screen and (min-width: 1150px) {
    .wrapper .content-box {
        width: 1150px;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 768px) {

    .navbar-nav > li > a {
        padding-top: 24px;
        padding-bottom: 24px;
    }
    .topnavbar .navbar-nav > li .active:after {
        content: '';
        display: block;
        position: absolute;
        border-bottom: 3px solid $blue_normal;
        top: 60px;
        margin-left: -15px;
        width: 100%;
    }
    .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
        margin-left: auto;
    }
    .app_client {
        margin-right: 0;
    }
    .modal-dialog { /*width: 600px;  */
        margin: 118px auto auto;
    }
}

@media only screen and (max-width: 768px) {
    .login_box {
        width: 300px;
    }
    .home_news_date_box .fa-plus {
        display: none
    }
    .nav-wrapper .nav > li {
        float: none;
    }
    .app_client {
        float: left;
        width: 100%;
    }
    .app_client .dropdown-menu {
        right: auto;
        left: 0;
    }
    .right_container .right_nav .spaceToRight {
        margin-left: auto;
    }
    .right_container .right_nav .spaceLeftBtn {
        margin-bottom: 5px;
    }
    .tableBoxJust {
        overflow-y: auto;
    }
    .tableBoxJust > table {
        width: 768px;
    }
    .form_title_right {
        text-align: left
    }
}
